<template>
	<!-- 客户时间轴 -->
	<view class="home">
		<view class="head">
			<navigator class="goBack" open-type="navigateBack">
				<u-icon name="arrow-left" color="#444" size="28" style="margin-right: 10rpx;"></u-icon>
				查看客户时间轴
			</navigator>
		</view>
		<view class="content">
			<image class="background" src="/static/img/background.png" mode="aspectFill"></image>
			<view class="cover">
				<image  src="/static/2.png" mode="aspectFill"></image>
				<view class="name">
					张三
				</view>
			</view>
			
			<scroll-view  class="box"  scroll-y="true"  >
				<view class="timeLineArr">
					<view class="timeLineItem" v-for="(item,index) in timeLineArr" :key="index">
						<view class="icon">
							<image src="../../static/img/timePoint.png" mode="aspectFill"></image>
						</view>
						<view class="text">{{item}}</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import titleRow from '@/component/titleRow/titleRow.vue'
	import dropDownWindow from '@/component/dropDownWindow/dropDownWindow'
	export default {
		data() {
			return {
				timeLineArr:[
					'2021年5月5日 15:29添加好友',
					'2021年5月5日 15:29加入“广佛策划师协会”社群',
					'2021年5月5日 15:29成交金额￥35'
				]
			}
		},
		methods:{
			
		},
		components:{
		},
		onLoad(option) {
			console.log(option);
		}
	}
</script>

<style lang="scss" scoped>
	.home {
		 background-color: #f9f9f9;
		 
  		.head {
			  display: flex;
			  justify-content: space-between;
			  height: 90rpx;
			  align-items: center;
			  padding: 0 30rpx;
			  background-color: #fff;
    		.goBack {
				color: #444444;
    		}

    		.goNew {
				background: #0991FF;
				color: #fff;
				height: 60rpx;
				width: 120rpx;
				display: grid;
				place-items: center;
				border-radius: 4rpx;
    		}
  		}
		
		.content{
			width:100vw;
			height: 1206rpx;
			background-size:cover;
			display: flex;
			flex-direction: column;
			justify-content: center;
			padding: 0 80rpx;
			position: relative;
			.background{
				position: absolute;
				left: 0;
				width:100vw;
				height: 1206rpx;
			}
			.cover{
				display: flex;
				width: 100%;
				height: 140rpx;
				align-items: center;
				z-index: 9;
				image{
					height: 86rpx;
					width: 86rpx;
					border-radius: 50%;
				}
				.name{
					color: #111111;
					font-size: 28rpx;
					margin-left: 28rpx;
				}
			}
		
			.box{
				width: 100%;
				margin: 50rpx 0;
				height: 1000rpx;
				display: flex;
				justify-content: center;
				.timeLineArr{
					display: flex;
					justify-content: center;
					flex-direction: column;
					align-items: center;
					width: 100%;
					
					.timeLineItem{
						width: 100%;
						height: 160rpx;
						display: flex;
						flex-direction: column;
						align-items: center;
						position: relative;
						.icon{
							image{
								width: 30rpx;
								height: 30rpx;
							}
						}
						
						.icon:before{
							content: '';
							position: absolute;
							top: -81%;
							left: 49.8%;
							width: 2rpx;
							height: 130rpx;
							color: #fff;
							background-color: #2772FE;
						}
						&:nth-child(1)  .icon:before{
							content: '';
							position: absolute;
							width: 0rpx;
							height: 0rpx;
						}
						&:nth-child(even) .text{
							position: absolute;
							width: 42%;
							left: 5%;
						}
						.text{
							color: #111111;
							font-size: 24rpx;
							width: 42%;
							position: absolute;
							right: 2%;
						}
					}
				}
				
			}
		}
		
  	}
</style>
